<template>
  <div class="main">
    <div class="contentDiv">
      <div class="jscxDiv">
        <SgTitleVue :name="'及时除险'" />
        <div class="contentDiv">
          <div class="leftDiv">
            <Title2Vue :name="'安全隐患'" />
            <div class="mainsDiv">
              <div class="chartsDiv">
                <PieCharts :id="'aqyhCharts'" :pieData="pieData" ::roseType="'area'" :legendShow="true" />
              </div>
              <div class="dataDiv">
                <div class="itemDiv">
                  <span>已处理</span>
                  <span>{{ clCount }}处</span>
                </div>
                <div class="itemDiv">
                  <span>未处理</span>
                  <span>{{ wclCount }}处</span>
                </div>
              </div>
              <div class="bgDiv">
                <p>隐患排查规范 SL 601《混凝土坝... SL 551《土石坝安...</p>
              </div>
            </div>
          </div>
          <div class="rightDiv">
            <Title2Vue :name="'危险源 '" />
            <div class="mainsDiv">
              <div class="chartsDiv">
                <PieCharts2 :pieData="pieData2" />
              </div>
              <div class="bgDiv">
                <p><span>危险源辨识规范</span> <span>危险源辨识与风险评估报告</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="dqtjDiv">
        <SgTitleVue :name="'定期体检'" />
        <div class="contentDiv">
          <div class="leftDiv">
            <Title2Vue :name="'安全体检'" />
            <div class="mainsDiv">
              <img src="../assets/img/common/peopleImg.png" />
              <div class="peopleWord">
                <p>隐患排查</p>
                <p>巡视检查</p>
                <p>安全监测</p>
              </div>
            </div>
          </div>
          <div class="rightDiv">
            <Title2Vue :name="'安全鉴定 '" />
            <div class="mainsDiv">
              <div class="itemDiv">
                <span>安全鉴定结论</span>
                <span>{{ aqjdjl }}</span>
              </div>
              <div class="itemDiv">
                <span>安全鉴定时间</span>
                <span>{{ aqjdsj }}</span>
              </div>
              <div class="itemDiv2">
                <span>安全鉴定报告</span>
                <span>蔡庄水库安全鉴定报告</span>
              </div>
              <div class="itemDiv">
                <span>距下次鉴定时间</span>
                <span>{{ jxcjdsj }}天</span>
              </div>
              <div class="itemDiv2">
                <span>规范</span>
                <span>水库大坝注册登记办法</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="qhwhDiv">
        <SgTitleVue :name="'强化维护'" />
        <div class="contentDiv">
          <div class="leftDiv">
            <Title2Vue :name="'维修养护'" />
            <div class="mainsDiv">
              <div class="listDiv">
                <div class="itemDiv" v-for="(item, index) in wxyhData" :key="index">
                  <span :title="item.name">{{ item.name }}</span>
                  <span>{{ item.val }}项</span>
                </div>
              </div>

              <div class="itemDiv2">
                <span>设备名称：1#水轮发电机组</span>
                <span>所在区域：02电站厂区</span>
              </div>
            </div>
          </div>
          <div class="rightDiv">
            <Title2Vue :name="'库容侵占 '" />
            <div class="mainsDiv">
              <div class="chartsDiv">
                <PieCharts3 :pieData="pieData3" />
              </div>
              <div class="itemDiv">
                <span>2025年第1季度</span>
                <span>7个</span>
              </div>
              <Title2Vue :name="'调度运用 '" />
              <div class="itemDiv">
                <span>控制运行计划</span>
                <span>蔡庄水库2025年控运计划</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bzaqDiv">
        <SgTitleVue :name="'应急保障'" />
        <div class="contentDiv">
          <div class="leftDiv">
            <Title2Vue :name="'安全鉴定 '" />
            <div class="mainsDiv">
              <div class="itemDiv">
                <span>责任人</span>
                <span>{{ zrr }}</span>
              </div>
              <div class="itemDiv2">
                <span>防范措施</span>
                <span>构建水利安全生产风险管控“六项机制”指...</span>
              </div>
              <div class="itemDiv">
                <span>安全措施</span>
                <span>{{ aqcs }}</span>
              </div>
              <Title2Vue :name="'划界权属 '" style="margin: 5px 0" />
              <div class="dataDiv">
                <div class="itemDiv">
                  <span title="管理范围面积">管理范围面积</span>
                  <span>{{ glfwmj }}km²</span>
                </div>
                <div class="itemDiv">
                  <span title="保护范围面积">保护范围面积</span>
                  <span>{{ bhfwmj }}km²</span>
                </div>
              </div>
              <div class="itemDiv">
                <span title="土地权属">土地权属</span>
                <span>{{ tdqs }}</span>
              </div>
            </div>
          </div>

          <div class="rightDiv">
            <Title2Vue :name="'应急保障 '" />
            <div class="contentDiv">
              <div class="itemDiv" v-for="(item, index) in yjbzData" :key="index">
                <span :title="item.label">{{ item.label }}</span>
                <span :title="item.leftLabel">{{ item.leftLabel }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SgTitleVue from '../components/common/sgTitleVue.vue'
import Title2Vue from '../components/common/title2Vue.vue'
import PieCharts from '../components/echarts/pieCharts.vue'
import PieCharts2 from '../components/echarts/pieCharts2.vue'
import PieCharts3 from '../components/echarts/pieCharts3.vue'

export default {
  name: 'Siguan',
  components: {
    SgTitleVue,
    Title2Vue,
    PieCharts,
    PieCharts2,
    PieCharts3
  },
  data() {
    return {
      pieData: [
        { value: 15, name: '安全' },
        { value: 5, name: '亚安全' },
        { value: 2, name: '不安全' },
        { value: 10, name: '待查' }
      ],
      clCount: 10,
      wclCount: 2,
      pieData2: [
        { value: 5, name: '低风险' },
        { value: 2, name: '一般风险' },
        { value: 1, name: '较大风险' },
        { value: 0, name: '重大风险' }
      ],
      aqjdjl: '一类坝',
      aqjdsj: '2023-08-02',
      jxcjdsj: 0,
      wxyhData: [
        {
          name: '大坝本体',
          val: 2
        },
        {
          name: '大坝周边',
          val: 5
        },
        {
          name: '防汛楼及其室外',
          val: 1
        },
        {
          name: '库区',
          val: 1
        },
        {
          name: '软设施',
          val: 10
        },
        {
          name: '电站厂区',
          val: 5
        },
        {
          name: '下游河道',
          val: 2
        },
        {
          name: '营地与室外绿化',
          val: 2
        },
        {
          name: '其他',
          val: 5
        },
        {
          name: '总计',
          val: 33
        }
      ],
      pieData3: [
        { value: 2, name: '已销号问题' },
        { value: 3, name: '疑似问题' },
        { value: 2, name: '待整改问题' }
      ],
      zrr: '安全防范责任人',
      aqcs: '为了确保蔡庄水库持续运行的安全性，定期的检查和维护工作是非常重要的，水库所有的设',
      tdqs: '蔡庄村集体',
      glfwmj: 3.21,
      bhfwmj: 4.91,
      yjbzData: [
        {
          label: '通讯基站',
          leftLabel: '1.2米CKu波段销体卫早通信天线'
        },
        {
          label: '政务网',
          leftLabel: '一备一用：晋中接入，太原接入'
        },
        {
          label: '蔡庄局域网专线',
          leftLabel: '实现,与下游的口水库通过局城网专线召开视视频会议'
        },
        {
          label: '应急通话',
          leftLabel: '全向卫星通话'
        },
        {
          label: '应急电力',
          leftLabel: '大坝左建新建发电机房'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.jxcjdsj = 0
    var date1 = new Date('2029-08-02')
    var date2 = new Date('2023-08-02')
    var date3 = new Date()
    var oneDay = 1000 * 60 * 60 * 24
    var allDay = Math.abs(date1.getTime() - date2.getTime()) / oneDay
    const yjDay = Math.abs(date3.getTime() - date2.getTime()) / oneDay
    this.jxcjdsj = Math.round(allDay - yjDay)
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/img/bg.png') no-repeat;
  background-size: 100%;
  padding: 10vh 2vw 14vh;
  box-sizing: border-box;
  .contentDiv {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    .jscxDiv,
    .dqtjDiv,
    .qhwhDiv,
    .bzaqDiv {
      width: 49%;
      height: 49%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .contentDiv {
        background-color: #0c2a4966;
        backdrop-filter: blur(0px);
        padding: 1vh 1vw;
        box-sizing: border-box;
        display: flex;
        .leftDiv,
        .rightDiv {
          width: 50%;
          height: 100%;
          display: flex;
          flex-direction: column;
        }
      }
    }
    .jscxDiv {
      .contentDiv {
        .leftDiv {
          .mainsDiv {
            flex: 1;
            display: flex;
            flex-direction: column;
            .chartsDiv {
              flex: 1;
              width: 100%;
              // height: 60%;
            }
            .dataDiv {
              width: 100%;
              padding-right: 10%;
              box-sizing: border-box;
              height: 5vh;
              display: flex;
              justify-content: space-between;
              .itemDiv {
                width: 48%;
                background: url('@/assets/img/common/kva2.png') no-repeat;
                background-size: 100%;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 1.9vh;
                display: flex;
                align-items: center;
                justify-content: center;
                span:nth-child(1) {
                  color: #00ffff;
                  margin-right: 10px;
                }
                span:nth-child(2) {
                  color: #fff;
                }
              }
            }
            .bgDiv {
              width: 100%;
              height: 3vh;
              line-height: 3vh;
              margin-top: 1vh;
              padding-right: 10%;
              box-sizing: border-box;
              p {
                background-color: #0b4c7d;
                border: 1px solid #6a95c9;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 1.5vh;
                color: #fefefe;
                padding-left: 5px;
                box-sizing: border-box;
              }
            }
          }
        }
        .rightDiv {
          .mainsDiv {
            flex: 1;
            display: flex;
            flex-direction: column;
            .chartsDiv {
              flex: 1;
              width: 100%;
            }
            .bgDiv {
              width: 100%;
              height: 3vh;
              line-height: 3vh;
              margin-top: 1vh;
              padding-left: 10%;
              box-sizing: border-box;
              p {
                background-color: #0b4c7d;
                border: 1px solid #6a95c9;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 1.5vh;
                color: #fefefe;
                padding: 0 10px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
              }
            }
          }
        }
      }
    }

    .dqtjDiv {
      .contentDiv {
        .leftDiv {
          .mainsDiv {
            flex: 1;
            display: flex;
            padding: 3vh 0 0 2vw;
            box-sizing: border-box;
            img {
              width: 52%;
            }

            .peopleWord {
              flex: 1;

              p {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 1.9vh;
                color: #ffffff;
              }

              p:nth-child(1) {
                position: relative;
                top: 1.5vh;
                right: 7vh;
              }

              p:nth-child(2) {
                position: relative;
                top: 4vh;
                right: 3.5vh;
              }

              p:nth-child(3) {
                position: relative;
                top: 8vh;
                right: -0.5vh;
              }
            }
          }
        }
        .rightDiv {
          .mainsDiv {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding: 1vh 1vw 1vh 2vh;
            box-sizing: border-box;
            .itemDiv {
              width: 100%;
              height: 5vh;
              background: url('@/assets/img/common/kva2.png') no-repeat;
              background-size: 100%;
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 1.9vh;
              color: #fff;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 2vh;
              box-sizing: border-box;
              span:nth-child(1) {
                color: #00ffff;
              }
            }
            .itemDiv:nth-child(1) {
              span:nth-child(2) {
                color: #9cff00;
              }
            }
            .itemDiv2 {
              width: 100%;
              height: 3vh;
              background-color: #0b4c7d;
              border: 1px solid #6a95c9;
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 1.5vh;
              color: #fefefe;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 2vh;
              box-sizing: border-box;
            }
          }
        }
      }
    }

    .qhwhDiv {
      .contentDiv {
        .leftDiv {
          .mainsDiv {
            flex: 1;
            padding-right: 10%;
            display: flex;
            flex-direction: column;
            .listDiv {
              flex: 1;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              .itemDiv {
                width: 48%;
                height: 5vh;
                background: url('@/assets/img/common/kva2.png') no-repeat;
                background-size: 100%;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 1.9vh;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 1.5vh;
                box-sizing: border-box;
                span:nth-child(1) {
                  color: #00ffff;
                  width: 60%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  cursor: pointer;
                }
              }
            }
            .itemDiv2 {
              width: 100%;
              height: 3vh;
              background-color: #0b4c7d;
              border: 1px solid #6a95c9;
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 1.5vh;
              color: #fefefe;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 2vh;
              box-sizing: border-box;
            }
          }
        }
        .rightDiv {
          .mainsDiv {
            flex: 1;
            display: flex;
            flex-direction: column;
            .chartsDiv {
              flex: 1;
              width: 100%;
            }

            .itemDiv {
              width: 100%;
              height: 3vh;
              background-color: #0b4c7d;
              border: 1px solid #6a95c9;
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 1.5vh;
              color: #fefefe;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 2vh;
              box-sizing: border-box;
              margin: 5px 0;
              span:nth-child(2) {
                width: 60%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                cursor: pointer;
                text-align: right;
              }
            }
          }
        }
      }
    }

    .bzaqDiv {
      .contentDiv {
        .leftDiv {
          .mainsDiv {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding: 1vh 1vw 1vh 2vh;
            box-sizing: border-box;
            .itemDiv {
              width: 100%;
              height: 5vh;
              background: url('@/assets/img/common/kva2.png') no-repeat;
              background-size: 100%;
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 1.9vh;
              color: #fff;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 2vh;
              box-sizing: border-box;
              span:nth-child(1) {
                color: #00ffff;
              }
              span:nth-child(2) {
                width: 60%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                cursor: pointer;
                text-align: right;
              }
            }
            .itemDiv2 {
              width: 100%;
              height: 3vh;
              background-color: #0b4c7d;
              border: 1px solid #6a95c9;
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 1.5vh;
              color: #fefefe;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 2vh;
              box-sizing: border-box;
              margin: 5px 0;
              span:nth-child(2) {
                width: 60%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                cursor: pointer;
                text-align: right;
              }
            }
            .dataDiv {
              width: 100%;
              height: 5vh;
              display: flex;
              justify-content: space-between;
              .itemDiv {
                width: 48%;
                background: url('@/assets/img/common/kva2.png') no-repeat;
                background-size: 100%;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 1.6vh;
                display: flex;
                align-items: center;
                justify-content: space-between;
                span:nth-child(1) {
                  color: #00ffff;
                  margin-right: 5px;
                  width: 60%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  cursor: pointer;
                }
                span:nth-child(2) {
                  color: #fff;
                }
              }
            }
          }
        }
        .rightDiv::-webkit-scrollbar {
          display: none;
        }
        .rightDiv {
          display: flex;
          flex-direction: column;
          overflow-y: auto;
          .itemDiv {
            width: 100%;
            height: 5vh;
            background: url('@/assets/img/common/kva2.png') no-repeat;
            background-size: 100%;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 1.9vh;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2vh;
            box-sizing: border-box;
            span:nth-child(1) {
              color: #00ffff;
              width: 40%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              cursor: pointer;
              text-align: left;
            }
            span:nth-child(2) {
              width: 60%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              cursor: pointer;
              text-align: right;
            }
          }
        }
      }
    }
  }
}
</style>
